<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            margin-top: 100px;
        }

        #big {
            position: absolute;
            top: 65px;
            left: 80px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <!-- 单击s获得文本焦点 -->
    <!-- <input type="search" name="key" id="key">
    <script>
        document.onkeypress = function (e) {
            // console.log(e.keyCode);
            if (e.keyCode == 115 || e.keyCode == 83) {
                //单击s获得文本焦点
                //元素对象.focus()  让元素对象获得焦点
                document.querySelector('#key').focus();
            }
        }
    </script> -->


    <!-- 快递单号查询 -->
    <form action="#" method="post">
        <table>
            <tr>
                <td>快递单号</td>
                <td>
                    <input type="text" name="bill" id="bill">
                </td>
            </tr>
        </table>
        <input type="text" name="big" id="big" style="display: none;">
    </form>
    <script>
        var bill = document.querySelector('#bill');
        var big = document.querySelector('#big');
        bill.addEventListener('focus', function () {
            big.style.display = 'block';
        })
        bill.addEventListener('blur', function () {
            big.style.display = 'none';
        })
        // bill.addEventListener('keypress',function(e){
        //     big.value += e.key;
        // })
        bill.addEventListener('keyup', function (e) {
            big.value = this.value;
        })
    </script>
</body>

</html>